<template>
    <section>
        <iframe v-if="$route.query.src"
            :src='$route.query.src'
            class="iframe"
            ref="iframe"
            style="width: 100%;height:auto;min-height: 680px;border: 0px;overflow-y:hidden;margin-bottom: 2rem"></iframe>
        <iframe v-else
            :src="urlPath"
            class="iframe"
            ref="iframe"
            style="width: 100%;height:auto;min-height: 680px;border: 0px;overflow-y:hidden;margin-bottom: 2rem"></iframe>
    </section>
</template>
<script>

/*#region 导入函数*/
import { mapGetters } from 'vuex'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style

/*#endregion*/

export default {
    name: 'IframeMode',
    methods: {

    /*#region 自定义函数(组件change事件等)*/
    // 显示等待框
    show () {
      NProgress.start()
    },
    // 隐藏等待狂
    hide () {
      NProgress.done()
    },
    // 加载浏览器窗口变化自适应
    resize () {
      window.onresize = () => {
        this.iframeInit();
      }
    },
    // 加载组件
    load () {
      this.show()
      // var flag = true //URL是否包含问号
      // if (this.$route.query.src.indexOf('?') == -1) {
      //   flag = false
      // }
      // var list = []
      // for (var key in this.$route.query) {
      //   if (key != 'src' && key != 'name') {
      //     list.push(`${key}= this.$route.query[key]`)
      //   }
      // }
      // list = list.join('&').toString()
      // if (flag) {
      //   this.$route.query.src = `${this.$route.query.src}${
      //     list.length > 0 ? `&list` : ''
      //     }`
      // } else {
      //   this.$route.query.src = `${this.$route.query.src}${
      //     list.length > 0 ? `?list` : ''
      //     }`
      // }
      //超时5s自动隐藏等待框，加强用户体验
      let time = 5
      const timeFunc = setInterval(() => {
        time--
        if (time == 0) {
          this.hide()
          clearInterval(timeFunc)
        }
      }, 1000);
      this.iframeInit();
    },
    //iframe窗口初始化
    iframeInit () {
      const iframe = this.$refs.iframe
      const clientHeight = document.documentElement.clientHeight - (this.cachedViews.length > 0 ? 200 : 130);
      if(iframe && iframe.style) {
        iframe.style.height = `${clientHeight}px`;
      }
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.hide()
        })
      } else {
        iframe.onload = () => {
          this.hide()
        }
      }
    },
    getUrlPath() {
        //获取 iframe src 路径
      let url = this.routerPath;
        //window.location.href
        //url = url.replace('/myiframe', '')
      return url
    }
    /*#endregion*/

    /*#region 数据提交事件*/

    /*#endregion*/

    /*#region 操作函数(handle)*/

    /*#endregion*/

    /*#region 获取数据*/

    /*#endregion*/

    },

    /*#region 生命周期函数(created、mount、等)*/
    created () {
        console.log(this.routerPath, "routerPath");
        NProgress.configure({ showSpinner: false })
    },
    mounted () {
        this.load()
        this.resize()
    },

    /*#endregion*/

    /*#region 注册绑定数据*/

    computed: {
        ...mapGetters(['cachedViews']),
    },
    data(){
        return{
            urlPath: this.getUrlPath() //iframe src 路径
        }
    },
    watch: {
        $route: function () {
            this.load()
        },
        routerPath: function () {
            // 监听routerPath变化，改变src路径
            this.urlPath = this.getUrlPath()
        }
    },
    props: ['routerPath']

    /*#endregion */

}
</script>
<style lang="scss" scoped>
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>